<template>
  <div  class="list" v-if="countView">
      <!--热搜内容列表-->
      <div style="text-align:left;height: 10px;font-size: 7px;margin-top: 5px">每15分钟更新</div>
      <hr/>
      <div v-show="webname === '百度热搜'">
        <el-result v-if="bdshow" title="抱歉，该时间段未获取热搜，请重新选择时间" style="height: 500px">
          <template slot="icon">
            <el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
          </template>
        </el-result>
        <div v-for="hotList in bdnewshot" :key="hotList.ranking" class="hot">
          <a :href="hotList.url" target="_blank" style="color:black;text-decoration-line: none">
            <span style=" width :20px; margin-left: 15px;">{{hotList.ranking}}</span>
            <span style=" width :520px;margin-left: 20px;font-size: 20px">{{hotList.topic }}</span>
            <span style=" margin-right: 20px;float:right">{{hotList.hot}}</span>
          </a>
          <hr/>
        </div>
      </div>

    <div v-show="webname === '腾讯新闻'">
      <el-result v-if="txshow" title="抱歉，该时间段未获取热搜，请重新选择时间"   style="height: 500px">
        <template slot="icon">
          <el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
        </template>
      </el-result>
      <div v-for="hotList in txnewshot" :key="hotList.ranking" class="hot">
        <a :href="hotList.url" target="_blank" style="color:black;text-decoration-line: none">
          <span style=" width :20px; margin-left: 15px;">{{hotList.ranking}}</span>
          <span style=" width :520px;margin-left: 20px;font-size: 20px">{{hotList.topic }}</span>
          <span style=" margin-right: 20px;float:right">{{hotList.hot}}</span>
        </a>
        <hr/>
      </div>
    </div>

    <div v-show="webname === '今日头条'">
      <el-result v-if="jrshow" title="抱歉，该时间段未获取热搜，请重新选择时间"   style="height: 500px">
        <template slot="icon">
          <el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
        </template>
      </el-result>
      <div v-for="hotList in jrnewshot" :key="hotList.ranking" class="hot">
        <a :href="hotList.url" target="_blank" style="color:black;text-decoration-line: none">
          <span style=" width :20px; margin-left: 15px;">{{hotList.ranking}}</span>
          <span style=" width :520px;margin-left: 20px;font-size: 20px">{{hotList.topic }}</span>
          <span style=" margin-right: 20px;float:right">{{hotList.hot}}</span>
        </a>
        <hr/>
      </div>
    </div>

    <div v-show="webname === '微博热搜'">
      <el-result v-if="wbshow" title="抱歉，该时间段未获取热搜，请重新选择时间"  style="height: 500px">
        <template slot="icon">
          <el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
        </template>
      </el-result>
      <div v-for="hotList in wbnewshot" :key="hotList.ranking" class="hot">
        <a :href="hotList.url" target="_blank" style="color:black;text-decoration-line: none">
          <span style=" width :20px; margin-left: 15px;">{{hotList.ranking}}</span>
          <span style=" width :520px;margin-left: 20px;font-size: 20px">{{hotList.topic }}</span>
          <span style=" margin-right: 20px;float:right">{{hotList.hot}}</span>
        </a>
        <hr/>
      </div>
    </div>

  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "HotShow",
  data(){
    return{
      bdnewshot: [],
      jrnewshot: [],
      txnewshot: [],
      wbnewshot: [],
      countView:true,
      bdshow: false,
      jrshow: false,
      txshow: false,
      wbshow: false,
    }
  },
  props:['webname'],
  computed:{
    ...mapState(['date','time']),
    //同时监听两个数据
    listenChange () {
      const _this = this
      const date = _this.date
      const time =_this.time
      return {date,time}
    }
  },
  methods: {
    getNewsHotList(){
      const _this = this
      _this.jrshow=false
      _this.wbshow=false
      _this.bdshow=false
      _this.txshow=false
      this.$axios.get(this.$base_url+"bdhot/newshotlist").then(res => {
        _this.bdnewshot=res.data.data
      })
      this.$axios.get(this.$base_url+"jrhot/newshotlist").then(res => {
        _this.jrnewshot=res.data.data
      })
      this.$axios.get(this.$base_url+"txhot/newshotlist").then(res => {
        _this.txnewshot=res.data.data
      })
      this.$axios.get(this.$base_url+"wbhot/newshotlist").then(res => {
        _this.wbnewshot=res.data.data
      })
    },
    getNewsHotListByQuert(){
      const _this = this
      var bd=this.$base_url+"bdhot/timehotlist/"+ _this.date + '/' + _this.time
      var jr=this.$base_url+"jrhot/timehotlist/"+ _this.date + '/' + _this.time
      var tx=this.$base_url+"txhot/timehotlist/"+ _this.date + '/' + _this.time
      var wb=this.$base_url+"wbhot/timehotlist/"+ _this.date + '/' + _this.time
      this.$axios.get(bd).then(res => {
        _this.bdnewshot=res.data.data
        if (res.data.data.length===0){
          _this.bdshow=true
        } else {
          _this.bdshow=false
        }
      })
      this.$axios.get(jr).then(res => {
        _this.jrnewshot=res.data.data
        if (res.data.data.length===0){
          _this.jrshow=true
        } else {
          _this.jrshow=false
        }
      })
      this.$axios.get(tx).then(res => {
        _this.txnewshot=res.data.data
        if (res.data.data.length===0){
          _this.txshow=true
        } else {
          _this.txshow=false
        }
      })
      this.$axios.get(wb).then(res => {
        _this.wbnewshot=res.data.data
        if (res.data.data.length===0){
          _this.wbshow=true
        } else {
          _this.wbshow=false
        }
      })
    }
  },

  mounted() {
    if (this.$route.name ==='Index'||this.$route.name ==='Query'){
      const _this = this
      _this.getNewsHotList()
    }
  },

  watch:{
    listenChange(val){
      const _this = this
      if (this.$route.name ==='Query'){
        if (_this.date===null&&_this.time===null){
          _this.getNewsHotList()
        } else {
          _this.getNewsHotListByQuert()
          //获取数据重新刷新页面
          _this.countView=false
          _this.$nextTick(()=>{
            _this.countView=true
          })
        }
      }
    },
  }
}
</script>

<style scoped>
.list {
  background-color: white;
}
.list:hover {
  -webkit-box-shadow: #ccc 0px 10px 10px;
  -moz-box-shadow: #ccc 0px 10px 10px;
  box-shadow: #ccc 0px 10px 10px;
}

span {
  display:-moz-inline-box;
  display:inline-block;
}


</style>